/*
 * Copyright (c) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React, { useState } from 'react';
import { View, Text, Image, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import { songs, Track } from '../model';
import CurPlaySong from './CurPlaySong';
import PlaylistHeaderTable from './PlaylistHeaderTable';
import musicPlayer from '../../util';

const SongListTable = () => {

    const [currentSong, setCurrentSong] = useState<Track>(songs[0]);
    const [isPlaying, setIsPlaying] = useState<boolean>(false);

    const renderItem = (item: Track, index: number) => (
        <TouchableOpacity
            style={[styles.songItem, { width: '45.3%', marginLeft: 32 }]}
            onPress={() => {
                setCurrentSong(item);
                musicPlayer.playTrackByIndex(index);
                setIsPlaying(true);
            }}
        >
            <View style={styles.songInfo}>
                <Text style={styles.songTitle}>{item.title}</Text>
                <View style={{ flexDirection: 'row', top: 2 }}>
                    <Image source={require('../../../../asset/acoustic.png')} style={styles.acoustic} />
                    <Text style={styles.songArtist}>{item.artist}</Text>
                </View>
            </View>
            <View style={{ flex: 1 }} />
            <Image source={require('../../../../asset/song_item_icon.svg')} style={styles.songIcon} />
        </TouchableOpacity>
    );

    return (
        <View style={{ flex: 1, marginLeft: 32, marginRight: 32 }}>
            <View style={{ height: 56, justifyContent: 'center' }}>
                <Image source={require('../../../../asset/back.png')} style={{ width: 40, height: 40 }} />
            </View>
            <View style={{ flex: 1, flexDirection: 'row', top: 8 }}>
                <PlaylistHeaderTable />
                <View style={{ flex: 1 }}>
                    <View style={styles.listHeader}>
                        <Image source={require('../../../../asset/play_icon.svg')} style={styles.listHeaderImage} />
                        <Text style={styles.listHeaderText}>{'播放全部'}</Text>
                        <View style={{ flex: 1 }} />
                        <Image source={require('../../../../asset/show_all.png')} style={styles.openIcon} />
                    </View>
                    <FlatList
                        data={songs}
                        renderItem={({ item, index }) => renderItem(item, index)}
                        keyExtractor={(item) => item.songID}
                        numColumns={2}
                        showsVerticalScrollIndicator={false}
                    />
                </View>
            </View>
            <CurPlaySong song={currentSong} setCurrentSong={setCurrentSong} isPlaying={isPlaying} setIsPlaying={setIsPlaying} />
        </View>
    );
};

const styles = StyleSheet.create({
    songItem: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
        height: 64,
        alignItems: 'center',
    },
    songInfo: {
        flexDirection: 'column',
        justifyContent: 'center',
    },
    songTitle: {
        fontSize: 16,
        fontWeight: '500',
        lineHeight: 21,
        color: 'rgba(0, 0, 0, 0.9)',
    },
    songArtist: {
        fontSize: 12,
        color: 'rgba(0, 0, 0, 0.4)',
        left: 4,
        lineHeight: 16,
    },
    songIcon: {
        width: 20,
        height: 20,
    },
    acoustic: {
        width: 16,
        height: 16,
    },
    listHeader: {
        height: 48,
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 32,
    },
    listHeaderImage: {
        width: 32,
        height: 32,
    },
    listHeaderText: {
        left: 8,
        fontSize: 18,
        color: 'rgba(0, 0, 0, 0.9)',
        fontWeight: '700',
        lineHeight: 24,
    },
    openIcon: {
        width: 20,
        height: 20,
        right: 0,
    },
});

export default SongListTable;
